<template>
    <view class="app-container login-container">
        <view class="header">
            <view class="logo">
                <image src="@/static/icon/logo.jpg" mode="widthFix" />
            </view>
            <view class="title">{{ $t('login.title') }}</view>
            <view class="subtitle">{{ $t('login.subTitle') }}</view>
        </view>
        <view class="form-container">
            <view class="van-cell-group">
                <view class="item">
                    <view class="icon"><wd-icon name="user" size="40rpx" color="#1877f2"></wd-icon></view>
                    <view class="content">
                        <wd-input
                            v-model="state.phoneNo"
                            :placeholder="$t('login.userName')"
                            placeholderStyle="font-size:28rpx"
                            no-border
                            clearable
                        />
                    </view>
                </view>
                <view class="item">
                    <view class="icon"><wd-icon name="secured" size="40rpx" color="#1877f2"></wd-icon></view>
                    <view class="content">
                        <wd-input
                            v-model="state.userPwd"
                            :placeholder="$t('login.password')"
                            placeholderStyle="font-size:28rpx"
                            show-password
                            no-border
                            clearable
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="form-btns" @click="onSubmit">{{ $t('login.signIn') }}</view>
        <view class="register-link" @click="toRegister">{{ $t('login.registerTips') }}</view>
        <OptionBar />
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { NavigateTo, showToast, setStorage, removeStorage } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app';
import OptionBar from '@/components/OptionBar/index';
import { toLang } from '@/utils/lang';
import { ILogin } from '@/types/login';
import { memberLogin } from '@/api/login';

const state = reactive<ILogin>({
    phoneNo: '',
    userPwd: ''
});

onLoad(() => {
    removeStorage('commonEnums');
});

//登录
const onSubmit = async () => {
    if (!state.phoneNo) {
        showToast({ title: toLang('login.verifyUserName') });
        return;
    }
    if (!state.userPwd) {
        showToast({ title: toLang('login.verifyUserPwd') });
        return;
    }
    const res = await memberLogin(state);
    if (res.code !== 200) {
        return;
    }
    setStorage('token', res.data.tokenHead + res.data.token);
    showToast({ title: `Login Success` });
    NavigateTo('/pages/home/index');
};

//跳转注册
const toRegister = () => {
    NavigateTo('/pages/register/index');
};
</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    animation: fadeIn 0.6s ease-out;
    padding: 0 5.33333vw;
    position: relative;
    overflow: hidden;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 53.33333vw;
        background: linear-gradient(45deg, #1877f21a, #1877f20d);
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
        z-index: 0;
    }
    .header {
        padding: 16vw 0;
        text-align: center;
        animation: slideDown 0.8s ease-out;
        position: relative;
        z-index: 1;
        .logo {
            image {
                width: 240rpx;
                border-radius: 20rpx;
            }
        }
        .title {
            font-size: 54rpx;
            font-weight: 700;
            color: #1c1e21;
            margin-top: 50rpx;
            text-shadow: 2rpx 2rpx rgba(0, 0, 0, 0.1);
        }
        .subtitle {
            margin-top: 34rpx;
            font-size: 30rpx;
            color: #65676b;
            opacity: 0.9;
        }
    }
    .form-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        animation: slideUp 0.8s ease-out;
        position: relative;
        z-index: 1;
        margin-top: 80rpx;
        .van-cell-group {
            background: #fff;
            border-radius: 30rpx;
            -webkit-backdrop-filter: blur(60rpx);
            backdrop-filter: blur(60rpx);
            margin: 0 30rpx 40rpx;
            overflow: hidden;
            transition: transform 0.3s ease;
            .item {
                height: 120rpx;
                display: flex;
                padding: 0 30rpx;
                align-items: center;
                .icon {
                    width: 60rpx;
                }
                .content {
                    flex: 1;
                    height: 100%;
                }
            }
        }
    }

    .form-btns {
        margin: 40rpx 0;
    }
    .register-link {
        text-align: center;
        margin: 30rpx 0;
        font-size: 28rpx;
        color: #1877f2;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slideDown {
    0% {
        transform: translateY(-60rpx);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slideUp {
    0% {
        transform: translateY(60rpx);
    }
    100% {
        transform: translateY(0);
    }
}
</style>
